<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Preserve Row Heights</title>
		<link href="../contents/bootstrap.min.css" rel="stylesheet"/>
		<link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="container-fluid">
			<button id="reload" class="btn btn-default">reload</button>
			<div id="grid"></div>
		</div>
	</body>
	<script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>
	<script type="text/javascript">
		document.readyState === "complete"?init():window.onload = init;
		function init(){
			
			let theGrid = new wijmo.grid.FlexGrid("#grid",{
				itemsSource: getData(),
				allowResizing: "Both",
				headersVisibility: wijmo.grid.HeadersVisibility.Column,
				columns:[
					{binding:"id",header:"主键", align:"center"},
					{binding:"country", header:"国家", align:"center"},
					{binding:"downloads", header:"下载量"},
					{binding:"sales", header:"销售量"},
					{binding:"expense", header:"费用"}
				]
			});
			
			document.getElementById("grid").addEventListener("click", function(){
				wijmo.Control.getControl("#grid").collectionView.refresh();
			});
		}
		
		function getData(){
			var countries = "US,Germany,UK,Japan,Italy,Greece".split(","), data=[];
			for(let i=0;i<200;i++){
				data.push({
					id:i,
					country:countries[i%countries.length],
					active:i%5!=0,
					downloads:Math.round(Math.random() * 2000),
					sales:Math.random() * 10000,
					expense:Math.random() * 50000
				});
			}
			return data;
		}
	</script>
</html>